<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
    <meta charset="utf-8">
    <title>文章分类</title>
</head>

<body>
    <div class="wrap">
        <!-- 头部 -->
        <c:import url="../head.jsp"></c:import>
        <!-- 左侧菜单和主体内容 -->
        <div class="grid-1-7" style="flex: 1;margin:0;">
            <!-- 左侧
            菜单 -->
            <c:import url="../menu.jsp"></c:import>
            <!-- 面包屑导航和主体内容 -->
            <div class="content">
                <!--面包屑导航-->
                <div class="content-header">
                    <div class="breadcrumb">
                        <span>分类管理</span>
                        <span class="divider">/</span>
                        <span class="active">文章分类</span>
                    </div>
                </div>
                <!--全部主体内容-->
                <div class="list-content">
                    <!--块元素-->
                    <div class="block">
                        <!--页面有多个表格时，可以用于标识表格-->
                        <h2>表格合并</h2>
                        <%--<!--右上角的返回按钮-->--%>
                        <%--<a href="javascript:history.back();">--%>
                            <%--<button class="button wathet" style="position: absolute;right: 20px;top: 16px;"><span class="icon-arrow_back"></span> 返回</button>--%>
                        <%--</a>--%>

                        <!--正文内容-->
                        <div class="main-0">
                            <!--表格上方的搜索操作-->
                            <%--<div style="text-align:right;margin-bottom:10px;">--%>
                                <%--<!-- 标题检索 -->--%>
                                <%--<input type="text" class="text" id="title" value="" placeholder="检索标题" />--%>
                                <%--<!-- 点击查询按钮 -->--%>
                                <%--<button class="button blue" style="margin-top: -3px;" onclick="search()"><span class="icon-search"></span></button>--%>
                            <%--</div>--%>

                            <!--表格上方的操作元素，添加、删除等-->
                            <div class="operation-wrap">
                                <div class="buttons-wrap">
                                    <button id="add" class="button blue"><span class="icon-plus"></span> 添加</button>
                                    <button id = "delete" class="button red"><span class="icon-minus"></span> 删除</button>
                                    <button id="save" class="button green"><span class="icon-check"></span> 保存</button>
                                </div>
                            </div>
                            <table id="table" class="table color2">
                                <thead>
                                <tr>
                                    <th style="width: 20px;"><input type="checkbox" class="fill listen-1"/> </th>
                                    <th style="width: 20px;">排序</th>
                                    <th>分类名称</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <%--遍历--%>
                                    <c:forEach items="${list}" var="entity" varStatus="status" >
                                        <tr>
                                            <td ><input type="checkbox" name="id" class="fill listen-1-2" value="${entity.id}"/> </td>
                                            <td ><input type="text" class="text" name="sore" data-type="正整数" error-msg="必须输入" value="${entity.sore}"/></td>
                                            <<td><input type="text" class="text" name="name" data-type="必填" placeholder="请输入分类名称" value="${entity.name}"/></td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    var idArr = new Array();
    var soreArr = new Array();
    var nameArr = new Array();

    //添加
    $("#add").click(function(){
        var html = "";
        html +='<tr>';
        html += '<td><input type="checkbox" class="fill listen-1-2" name="id" value="${entity.id}"/> </td>';
        html += '<td><input type="text" class="text" name="sore" data-type="正整数" error-msg="必须输入" value="${entity.sore}"/></td>';
        html += '<td><input type="text" class="text" name="name" data-type="必填" placeholder="请输入分类名称" value=""/></td>';
        html +='</tr>';

        $("#table tbody").append(html);
        //重新渲染
        javaex.render();
    });

    //更新/保存
    $("#save").click(function(){

        idArr = [];
        soreArr = [];
        nameArr = [];
        //将id加入数组中
        $(':checkbox[name="id"]').each(function () {
            idArr.push($(this).val());
        });

        //将sore加入数组中
        $('input[name="sore"]').each(function () {
            soreArr.push($(this).val());
        });

        //将name加入数组中
        $('input[name="name"]').each(function () {
            nameArr.push($(this).val());
        });

        //控制台打印
       /* console.log(idArr);
        console.log(soreArr);
        console.log(nameArr);*/

        if (javaexVerify()) {
            //发送ajax请求
            $.ajax({
                url : "save.json",
                type : "POST",
                dataType : "json",
                traditional:true,//开启数组提交
                data : {
                    "idArr": idArr,
                    "soreArr" : soreArr,
                    "nameArr": nameArr
                },

                success : function(rtn) {
                    //console.log(rtn);
                    if (rtn.code == "000000") {
                        javaex.optTip({
                            content:rtn.message,

                        });
                        //延迟加载
                        setTimeout(function () {
                            window.location.reload();
                        },2000);
                    }else {
                        javaex.optTip({
                            content:rtn.message,
                            type:"error"
                        },2000);

                    }
                }
            });
        }
    });

    $("#delete").click(function () {
        idArr = [];
        //1 遍历选中的复选框
        $(':checkbox[name="id"]:checked').each(function () {
            var id = $(this).val();
            if (id != "") {
                idArr.push(id);
            }
        });
        //2 判断复选框的数组长度是否为0，0则前台直接删除，非0则提交后台删除
        if (idArr.length == 0) {
            $(':checkbox[name="id"]:checked').each(function () {
                //前台无刷新去掉新增的tr
                $(this).parent().parent().parent().remove();

            });
        }else {
            $.ajax({
                url: "delete.json",
                type: "POST",
                dataType: "json",
                traditional: true,//开启数组提交
                data: {
                    "idArr": idArr

                },
                success: function (rtn) {
                    if (rtn.code == "000000") {
                        javaex.optTip({
                            content: rtn.message,

                        });
                        //延迟加载
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    } else {
                        javaex.optTip({
                            content: rtn.message,
                            type: "error"
                        }, 2000);

                    }
                }
            });

        }
    });




</script>
</html>